<template>
  <div class="hbh-halfCricle">
    <canvas id="canvas" :width="canvasSize" :height="sum"></canvas>

    <div
      class="content"
      :style="{ top: `calc(50% - ${contentTop})`, left: `calc(50% - ${contentLeft})` }"
    >
      <slot name="hbhCustom">{{ ratio }}</slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contentTop: '0px',
      contentLeft: '0px'
    }
  },
  props: {
    val: {
      type: Number,
      default: 0 //0~1
    },
    size: {
      type: Number,
      default: 200 //0~1
    },
    lineWidth: {
      //进度条宽度
      type: Number,
      default: 10 //0~1
    },
    ratio: {
      type: Number,
      default: 1 //0~1
    }
  },
  computed: {
    canvasSize() {
      return this.size * this.ratio
    },
    canvasLineWidth() {
      return this.lineWidth * this.ratio
    },
    process() {
      return this.val
    },
    sum() {
      return (this.canvasSize + this.canvasLineWidth) / 2
    }
  },
  watch: {
    ratio: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.init()
        })
      },
      immediate: true
    },
    val: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          this.init()
        })
      }
    }
  },
  methods: {
    init() {
      let { clientWidth, clientHeight } = document.querySelector('.content')
      this.contentTop = clientHeight / 2 + 'px'
      this.contentLeft = clientWidth / 2 + 'px'
      const canvas = document.querySelector('#canvas')
      const ctx = canvas.getContext('2d')
      const { width, height } = canvas
      ctx.clearRect(0, 0, width, height)
      ctx.beginPath()
      ctx.arc(
        width / 2,
        width / 2,
        (width - this.canvasLineWidth) / 2,
        Math.PI * 1,
        Math.PI * 2,
        false
      )
      ctx.lineWidth = this.canvasLineWidth
      // ctx.strokeStyle = 'rgba(255, 255, 255, 1)'
      var jb = ctx.createLinearGradient(0, 0, 100, 0)
      jb.addColorStop(0, 'rgba(238, 238, 238, 1)') //参数为0<stop<1,color
      jb.addColorStop(1, 'rgba(238, 238, 238, 1)')
      // 给曲线着色
      ctx.strokeStyle = jb
      ctx.lineCap = 'round'
      ctx.stroke()
      ctx.closePath()
      if (this.process <= 0) {
        return
      }
      ctx.beginPath()
      ctx.arc(
        width / 2,
        width / 2,
        (width - this.canvasLineWidth) / 2,
        Math.PI * 1,
        Math.PI * (1 + 1 * this.process),
        false
      )
      ctx.lineWidth = this.canvasLineWidth
      // ctx.strokeStyle = 'rgba(255, 255, 255, 1)'
      var jb2 = ctx.createLinearGradient(0, 0, 100, 0)
      let statusColor = 'rgba(255, 64, 64, 1)'
      switch (true) {
        case this.process >= 0 && this.process < 0.4:
          statusColor = 'rgba(255, 64, 64, 1)'
          break
        case this.process >= 0.4 && this.process < 0.8:
          statusColor = 'rgba(253, 181, 78, 1)'
          break
        case this.process >= 0.8:
          statusColor = 'rgba(48, 201, 161, 1)'
          break
        default:
          break
      }
      jb2.addColorStop(0, statusColor) //参数为0<stop<1,color
      jb2.addColorStop(1, statusColor)
      // 给曲线着色
      ctx.strokeStyle = jb2
      ctx.lineCap = 'round'
      ctx.stroke()
      ctx.closePath()
    }
  }
}
</script>

<style lang="scss" scoped>
.hbh-halfCricle {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    position: absolute;
  }
}
</style>
